<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
		<script src="./layui-v2.5.7/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<!-- 
		导航：
		  水平导航 layui-nav
		     1.layui-nav-item 定义导航项
			 2.layui-this 表示当前选中的项
			 3.layui-nav-child 定义二级菜单
		  垂直导航 layui-nav layui-nav-tree
		  侧边导航 layui-nav layui-nav-tree layui-nav-side
		    1）设置主题颜色 在后面添加layui-bg-* *代表颜色选项
			    墨绿molv
				藏青cyan
				艳蓝blue 等等
			2）添加徽章效果：将span标签放在导航项中间
			3）面包屑式导航 layui-breadcrumb
			  通过设置属性 lay-separator="*" 来自定义分隔符,*指代自定义的分隔符
		 -->
		 <!-- 水平导航 layui-nav -->
		<!-- <ul class="layui-nav">
			 <li class="layui-nav-item layui-this"><a href="02布局容器.html">布局容器</a></li>
			 <li class="layui-nav-item"><a href="03栅格系统.html">栅格系统</a></li>
			 <li class="layui-nav-item"><a href="04按钮.html">按钮</a></li>
			 <li class="layui-nav-item"><a href="">解决方案</a>
			 <dl class="layui-nav-child">
				 <dd><a href="">1</a></dd>
				  <dd><a href="">2</a></dd>
				   <dd><a href="">3</a></dd>
			 </dl>
			 </li>
		 </ul> -->
		 <!-- 垂直导航 layui-nav layui-nav-tree -->
		 <!-- <ul class="layui-nav layui-nav-tree">
		 			 <li class="layui-nav-item layui-this"><a href="02布局容器.html">布局容器</a></li>
		 			 <li class="layui-nav-item"><a href="03栅格系统.html">栅格系统</a></li>
		 			 <li class="layui-nav-item"><a href="04按钮.html">按钮</a></li>
		 			 <li class="layui-nav-item "><a href="javascript:;">解决方案</a>
		 			 <dl class="layui-nav-child">
		 				 <dd><a href="">1</a></dd>
		 				  <dd><a href="">2</a></dd>
		 				   <dd><a href="">3</a></dd>
		 			 </dl>
		 			 </li>
		 </ul> -->
		 <!-- 侧边导航 layui-nav layui-nav-tree layui-nav-side -->
		 <!-- <ul class="layui-nav layui-nav-tree layui-nav-side">
		 			 <li class="layui-nav-item layui-this"><a href="02布局容器.html">布局容器</a></li>
		 			 <li class="layui-nav-item"><a href="03栅格系统.html">栅格系统</a></li>
		 			 <li class="layui-nav-item"><a href="04按钮.html">按钮</a></li>
		 			 <li class="layui-nav-item "><a href="javascript:;">解决方案</a>
		 			 <dl class="layui-nav-child">
		 				 <dd><a href="">1</a></dd>
		 				  <dd><a href="">2</a></dd>
		 				   <dd><a href="">3</a></dd>
		 			 </dl>
		 			 </li>
		 </ul> -->
		 <!--设置主题颜色 在后面添加layui-bg-* *代表颜色选项-->
		 <!-- <ul class="layui-nav layui-nav-tree layui-nav-side layui-bg-red">
		 			 <li class="layui-nav-item layui-this"><a href="02布局容器.html">布局容器</a></li>
		 			 <li class="layui-nav-item"><a href="03栅格系统.html">栅格系统<span class="layui-badge layui-bg-orange">橙</span></a></li>
		 			 <li class="layui-nav-item"><a href="04按钮.html">按钮</a></li>
		 			 <li class="layui-nav-item "><a href="javascript:;">解决方案</a>
		 			 <dl class="layui-nav-child">
		 				 <dd><a href="">1</a></dd>
		 				  <dd><a href="">2</a></dd>
		 				   <dd><a href="">3</a></dd>
		 			 </dl>
		 			 </li>
		 </ul> -->
		 <!-- 
		 添加徽章效果：
		 将span标签放在导航项中间
		 例如：<li class="layui-nav-item"><a href="03栅格系统.html">栅格系统<span class="layui-badge layui-bg-orange">橙</span></a></li>
		 -->
		 <!-- 面包屑式导航 -->
		 <!-- <span class="layui-breadcrumb">
		   <a href="">首页</a>
		   <a href="">国际新闻</a>
		   <a href="">亚太地区</a>
		   <a><cite>正文</cite></a>//cite指当前指向页面
		 </span> -->
		 <!--
		 还可以通过设置属性 lay-separator="*" 来自定义分隔符,*指代自定义的分隔符
		 例如：首页- 国际新闻- 亚太地区- 正文
		     只需要在后面添加lay-separator="-"即可
		   -->
		<span class="layui-breadcrumb" lay-separator="giao">
		  <a href="">首页</a>
		  <a href="">国际新闻</a>
		  <a href="">亚太地区</a>
		  <a><cite>正文</cite></a>
		</span>
		<script type="text/javascript">
		//导航，依赖element模块
		layui.use('element',function(){
			var element=layui.element;
		});
		</script>
	</body>
</html>
